<template>
	<view>
		<view v-if="HeadShow" class="head-new">
			<view class="h-l"  @click="goPrev">
				<i class="hd-icon">&#xe646;</i>
			</view>
			<view class="h-r"  @click="go">
				<i class="hd-icon">&#xe600;</i>
			</view>	
		</view>
		<view v-if="!HeadShow" class="head-top">
			<view class="head-left">
				<text  @click="goPrev" class="hd-icon">&#xe646;</text>
			</view>
			<view class="center-list">
				<view @click="goScroll(0)" :class="{active:HeadActive==0}">商品</view>
				<view @click="goScroll(1)" :class="{active:HeadActive==1}">评价</view>
				<view @click="goScroll(2)" :class="{active:HeadActive==2}">详情</view>
				<view @click="goScroll(3)" :class="{active:HeadActive==3}">推荐</view>
			</view>
			<view class="head-right">
				<text @click="go" class="hd-icon">&#xe600;</text>
			</view>
		</view>
	</view>
</template> 

<script>
	export default{
		data(){
			return{
				
			}
		},
		props:{
			HeadActive:{
				type:Number,
				default:0
			},
			HeadShow:{
				type:Boolean,
				default:true
			}
		},
		methods:{
			goPrev(){
				uni.navigateBack({
				    delta:1
				});
			},
			goScroll(index){
				this.$emit('goScroll',index)
			},
			go(){
				this.$Shop.navigateCart();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.head-new{
		width:100%;
		display: flex;
		justify-content:space-between;
		position:fixed;
		top:0;
		left:0;
		z-index: 999;
		.h-l,.h-r{
			background: #adadad;
			color:#fff;
			width:70rpx;
			height: 70rpx;
			text-align: center;
			line-height:70rpx;
			border-radius: 50%;
			margin-top:20rpx;
		}
		.h-l{
			margin-left:20rpx;
		}
		.h-r{
			margin-right:20rpx;
		}
	}
	.head-top{
		background: #fff;
		width:100%;
		display: flex;
		justify-content:space-between;
		position:fixed;
		top:0;
		left:0;
		z-index: 999;
		border-bottom:1px solid #d1d1d1;
		display: flex;
		justify-content: center;
		
		.center-list{
			width:50%;
			display: flex;
			justify-content: space-around;
			position:relative;
			right:-40rpx;
			view{
				padding:34rpx 0;	
				font-size:24rpx;
				color:#999;
				&.active{
					color:#000;
					border-bottom:1px solid #ff2150;
				}
			}
		}
		.head-left{
			display: flex;
			align-items: center;
			padding:20rpx 0;
			position:relative;
			left: -100rpx;
		
			text{
				display: block;
				float: left;
				font-size:32rpx;
				margin-right:20rpx;
				color:#fd8197;
			}
		}
		.head-right{
			display: flex;
			align-items: center;
			padding:20rpx 0;
			position:relative;
			right: -100rpx;

			text{
				display: block;
				float: right;
				font-size:32rpx;
				margin-right:20rpx;
				color:#fd8197;
			}
		}
	}
</style>
